Guten Tag, ich bin also der Rauschenmeister vor Wolfgang und versuche in der Kürze der Zeit einen

Einblick in die Gedankenwelt von modularer Frontendentwicklung zu geben. Ziel der ganzen

Geschichte ist, dass mehrere Personen an einem Projekt effizient arbeiten können,

dass einzelne Seitenbestandteile in anderen Projekten wiederverwendet werden können,

denn schließlich machen wir im Prinzip nichts revolutionär Neues, wenn wir ein neues Projekt

machen. Das ist eigentlich immer wieder das Gleiche. Wir brauchen eine Navigation, wir brauchen ein paar

Teaserbox, wir brauchen Überschriften. Es kommt mal was Neues hinzu, aber auch das ist selten

revolutionär. Das hat irgendjemand schon mal vorher gemacht oder wir haben das schon mal vorher

gemacht, zwei Jahre vorher und dementsprechend wäre es ja ganz praktisch, wenn wir das alles mal

sammeln könnten. Es geht um Theming, um Theming einfacher zu machen, es geht um Arbeit in einem

Living Style Guide oder Dokumentation in einem Living Style Guide. All das können wir jetzt in

der halben Stunde oder knapp ein dreiviertel Stunde nicht in aller Tiefe beleuchten. Normalerweise

ist das Futter für einen halbtägigen oder ganztägigen Workshop, aber ich versuche es mal in

Kürze, in der Kürze der Zeit die wichtigsten Sachen zu beleuchten. Am Ende soll tatsächlich

sowas wie ein eigenes Bootstrap stehen, denn was ist denn Bootstrap eigentlich anderes als eine

Sammlung von fertigen UI Modulen, die wir benutzen oder auch nicht benutzen und dazu ist noch ein Grid

dabei, was wir halt brauchen um das Layout ein bisschen zu rechten Zimmern. Da ist ja wirklich

keine Raketenwissenschaft hinter Bootstrap. Eine Webseite ist nichts anderes als eine Ansammlung von

Modulen. Das ist kein Gesamtkunstwerk, sondern wird zusammengestoppelt aus Einzelteilen, die

manchmal nur einmal erscheinen, manchmal mehrfach erscheinen. Also wir haben so einen typischen

Header hier oben, der kommt logischerweise nur einmal vor. Wir haben meistens ein irgendwie

geartetes großes Bild, das seine Aufmerksamkeit auf sich ziehen soll und ansonsten ganz viele

kleinere Texte oder auch mal hier solche Teaser, die weiterführende Links sein sollen oder auch

Werbung und all das wiederholt sich teilweise mehrfach. Also eine Webseite ist nachher eine

Zusammenstoppelung von Einzel-Elementen, die immer wieder auf dem gleichen Mini-Template beruhen.

Da ist nichts besonders Dramatisches nachher dahinter und es muss niemand hier anfangen,

dafür jeweils ein eigenes Template zu erzeugen. Hier ist das vielleicht noch sehr einfach ersichtlich,

aber bei solchen Navigationen ist es vielen nicht so einfach ersichtlich. Meine These ist,

was heißt meine These, also meine Forderung ist, für so etwas brauchen wir nicht drei verschiedene

Module zu machen, sondern das ist ein einziges Modul, nämlich eine Navigation. Die ist in diesem

Falle auch noch zufälligerweise horizontal. Die vertikale Navigation wäre auch genau das gleiche

Modul, es wäre halt nur ein anderes CSS dahinter und das sind teilweise auch nur 20 Zeilen CSS oder

30. Das ist nichts Dramatisches. Wo es dann anfängt sich ein wenig zu unterscheiden ist,

wenn ich jetzt eine horizontale Navigation mit Subnavigationspunkten habe. Aber auch das kann

man im Prinzip als ein Modul abfackeln. Also obwohl das drei unterschiedliche Navigationen rein

optisch sind, ist es ein Modul, denn es kommt bei der modularen Entwicklung erst mal nicht darauf an,

wie es aussieht, sondern bei der modularen Entwicklung kommt es erst mal darauf ein,

was ist es. Also wir bewegen uns da erst mal auf der HTML-Ebene und da fragen wir ja nicht,

wie es aussieht, sondern was ist es. Ist es eine Überschrift, ist es eine Liste, ist es eine

Navigation, was ist es? Und daraus mache ich dann ein Modul. Also ich mache aus der Hauptnavigation

ein Modul, ob ich die horizontal oder vertikal als Pillen mit Dreiecken, mit Hintergrundfarben

oder sonst was mache. Das ist einfach nur die Frage von ein bisschen CSS. Auch hier genau das

gleiche. Ich habe hier einen Teaser und ich habe mal den Teaser mit Bild. Ob da ein Bild drin ist

oder nicht ist egal. Das ist einfach der gleiche Teaser. Das sind nur zwei Ausprägungen der

gleichen Art von Modul. Also müssen wir bei modularen Entwicklung als erstes müssen wir

ans HTML denken und da denken wir erst mal abstrakt, worum geht es, was machen wir da. Wir machen den

Teaser. Der Teaser kann ein Bild enthalten, muss aber nicht. Ich empfehle bei so etwas auch immer

über den Designer und den Kunden hinweg weiter zu denken. Der Kunde wird normalerweise sagen,

dieser Teaser kommt nur auf die Startseite. Klar, drei Monate nach Livegang kommt der auf alle

Fälle auch woanders hin der Teaser. Und das ist aber auch nicht schlimm. Das ist ja der Gag